// import React, { useState, } from 'react';
// import { Form, Modal, Steps, Button } from "antd";
// import ProForm, {
//     ModalForm,
//     DrawerForm,
//     QueryFilter,
//     LightFilter,
//     StepsForm,
//     ProFormText,
//     ProFormDateRangePicker,
//     ProFormSelect,
//     ProFormRadio,
//   } from '@ant-design/pro-form';

// const { Step } = Steps;
// const formLayout = {
//     labelCol: {
//       span: 7,
//     },
//     wrapperCol: {
//       span: 13,
//     },
//   };
// const UpdateUserForm = (props) =>  {

//     const { formVals, setFormVals } = useState({
//         username: props.values.username,
//         gengder: props.values.gender,
//         // key: props.values.username,
//     });
     
//     const {
//         onSubmit: handleUpdate,
//         onCancel: handleUpdateModalVisible,
//         updateModalVisible,
//         values,
//     } = props;
//     const form = ProForm.useForm();
//     const [ currentStep, setCurrentStep ] = useState(0); 
//     const forward = () => setCurrentStep(currentStep + 1);
//     const backward = () => setCurrentStep(currentStep - 1);
//     const handleNext = async () => {
//         if (currentStep < 2) {
//             forward();
//         } 
//         // const fieldsValue = await form.validateFields();
//         // setFormVals({ ...formVals, ...fieldsValue });

//         // if (currentStep < 2) {
//         // forward();
//         // } else {
//         // handleUpdate({ ...formVals, ...fieldsValue });
//         // }
//     };
//     const renderContent = () => {
        
//         if (currentStep === 1) {
//             return (
//                 <ProForm.Group>
//                     <ProFormSelect
//                         options={[
//                             {
//                                 value: 1,
//                                 label: '男',
//                             },
//                             {
//                                 value: 0,
//                                 label: '女',
//                             },
//                         ]}
//                         // readonly
//                         width="xs"
//                         name="gender"
//                         label="性别"
//                     />
//                 </ProForm.Group>
//               );
//         }
//         if (currentStep === 2) {
//             return (
//                 <ProForm.Group>
//                     <ProFormText
//                         width="md"
//                         name="username"
//                         value={username}
//                         label="用户名"
//                         tooltip="最长为12位"
//                         placeholder="请输入用户名"
//                         rules={[
//                             {
//                             required: true,
//                             message: '请输入规则名称！',
//                             },
//                         ]}
//                     />
//                 </ProForm.Group>
//               );
//         }
//         return (
//             <ProForm.Group>
//                 <ProFormText
//                     width="md"
//                     name="username"
//                     label="用户名"
//                     tooltip="最长为12位"
//                     placeholder="请输入用户名"
//                     rules={[
//                         {
//                             required: true,
//                             message: '请输入规则名称！',
//                         },
//                     ]}
//                 />
//             </ProForm.Group>
//         );
//     };

//     const renderFooter = () => {
//         if (currentStep === 1) {
//             return (
//               <>
//                 <Button
//                   style={{
//                     float: 'left',
//                   }}
//                   onClick={backward}
//                 >
//                   上一步
//                 </Button>
//                 <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
//                 <Button type="primary" onClick={() => handleNext()}>
//                   下一步
//                 </Button>
//               </>
//             );
//           }
      
//           if (currentStep === 2) {
//             return (
//               <>
//                 <Button
//                   style={{
//                     float: 'left',
//                   }}
//                   onClick={backward}
//                 >
//                   上一步
//                 </Button>
//                 <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
//                 <Button type="primary" onClick={() => handleNext()}>
//                   完成
//                 </Button>
//               </>
//             );
//           }
      
//           return (
//             <>
//               <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
//               <Button type="primary" onClick={() => handleNext()}>
//                 下一步
//               </Button>
//             </>
//           );
//     };
//     return (
//         <Modal
//             title="修改用户信息"
//             visible={updateModalVisible}
//             footer={renderFooter()}
//             onCancel={handleUpdateModalVisible}
//         >
//             <Steps
//                 style={{
//                 marginBottom: 28,
//                 }}
//                 size="small"
//                 current={currentStep}
//             >
//                 <Step title="基本信息" />
//                 <Step title="私密信息" />
//                 <Step title="扩展信息" />
//             </Steps>
//             <ProForm
//                 {...formLayout}
//                 // form={form}
//                 onFinish={async (values) => {
//                 await waitTime(2000);
//                 console.log(values);
//                 message.success('提交成功');
//                 }}
//                 initialValues={{
//                   // name: formVals.username
//                     // target: formVals.target,
//                     // template: formVals.template,
//                     // type: formVals.type,
//                     // frequency: formVals.frequency,
//                     // username: formVals.username,
//                     // gengder: formVals.gengder,
//                 }}
//             >
//                 {renderContent()}
//             </ProForm>
//         </Modal>
//     );
// };

// export default UpdateUserForm;



import React, { useState } from 'react';
import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps, InputNumber } from 'antd';
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 13,
  },
};

const UpdateUserForm = (props) => {
  const [formVals, setFormVals] = useState({
    username: props.values.username,
    gender: props.values.gender,
    nickname: props.values.nickname,
    money: props.values.money,
    gmt_modified: props.values.gmt_modified,
    // target: '0',
    // template: '0',
    // type: '1',
    // time: '',
    // frequency: 'month',
  });
  const [currentStep, setCurrentStep] = useState(0);
  const [form] = Form.useForm();
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  const forward = () => setCurrentStep(currentStep + 1);

  const backward = () => setCurrentStep(currentStep - 1);

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    setFormVals({ ...formVals, ...fieldsValue });

    if (currentStep < 2) {
      forward();
    } else {
      handleUpdate({ ...formVals, ...fieldsValue });
    }
  };

  const renderContent = () => {
    if (currentStep === 1) {
      return (
        <>
          <FormItem name="gender" label="性别">
            <Select
              style={{
                width: '100%',
              }}
            >
              <Option value="0">女</Option>
              <Option value="1">男</Option>
            </Select>
          </FormItem>
          <FormItem name="money" label="余额">
              <InputNumber 
                step={1} // 每次改变的值是加减1
                precision={2} //始终保留2位小数点，就算是整数时，也保留。
                min={0}
                // formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                // parser={value => value.replace(/\$\s?|(,*)/g, '')}
                // onChange={onChange}
              />
          </FormItem>
        </>
      );
    }

    if (currentStep === 2) {
      return (
        <>
          <FormItem
            name="gmt_modified"
            label="修改时间"
            rules={[
              {
                required: true,
                message: '请选择修改时间！',
              },
            ]}
          >
            <DatePicker
              style={{
                width: '100%',
              }}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择开始时间"
            />
          </FormItem>
        </>
      );
    }

    return (
      <>
        <FormItem
          name="username"
          label="用户名"
          rules={[
            {
              required: true,
              message: '请输入用户名！',
              min: 1,
            },
          ]}
        >
          <Input placeholder="请输入用户名" />
        </FormItem>
        <FormItem
          name="nickname"
          label="昵称"
          rules={[
            {
              required: true,
              message: '请输入昵称！',
              min: 5,
            },
          ]}
        >
          <TextArea rows={4} placeholder="请输入至少五个字符" />
        </FormItem>
      </>
    );
  };

  const renderFooter = () => {
    if (currentStep === 1) {
      return (
        <>
          <Button
            style={{
              float: 'left',
            }}
            onClick={backward}
          >
            上一步
          </Button>
          <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
          <Button type="primary" onClick={() => handleNext()}>
            下一步
          </Button>
        </>
      );
    }

    if (currentStep === 2) {
      return (
        <>
          <Button
            style={{
              float: 'left',
            }}
            onClick={backward}
          >
            上一步
          </Button>
          <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
          <Button type="primary" onClick={() => handleNext()}>
            完成
          </Button>
        </>
      );
    }

    return (
      <>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
        <Button type="primary" onClick={() => handleNext()}>
          下一步
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="用户资料编辑"
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >
      <Steps
        style={{
          marginBottom: 28,
        }}
        size="small"
        current={currentStep}
      >
        <Step title="基本信息" />
        <Step title="隐私信息" />
        <Step title="其他信息" />
      </Steps>
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          // target: formVals.target,
          // template: formVals.template,
          // type: formVals.type,
          // frequency: formVals.frequency,
          username: formVals.username,
          nickname: formVals.nickname,
          gender: formVals.gender.toString(),
          money: formVals.money,
          // gmt_modified: formVals.gmt_modified,
          // gmt_modified: new Date(),
        }}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default UpdateUserForm;
